<template>
	<div class="nation" v-if="isShow">
		<el-tabs v-model="activeName" class="nation-tabs" :stretch="true" @click="handlerClick($event)">
			<el-tab-pane class="nation-tabs-item" v-for="item in NATION_TAGS" :key="item" :name="item" :label="item">
				<div class="nation-tabs-item-content" v-if='data'>
					<div class="nation-tabs-item-content-block" v-for="value in currentName" :key="value">
						<div class="nation-tabs-item-content-block-title" v-if="item !== NATION_TAGS[0]">{{ value }}</div>
						<div class="nation-tabs-item-content-block-flag" v-if="value !== '1'">
							<div class="nation-tabs-item-content-block-flag-box" v-for="nationInfo in data.nation_arr[value]" :key="nationInfo.flag">
								<div class="img">
									<img :src="nationInfo.flag" alt="" />
								</div>
								<span>{{ nationInfo.chinese_simplified }}</span>
							</div>
						</div>
						<div class="nation-tabs-item-content-block-flag" style="justify-content: space-between" v-else>
							<div
								class="nation-tabs-item-content-block-flag-box"
								v-for="nationInfo in data.nation_arr[NATION_TAGS[0]]"
								:key="nationInfo.flag"
							>
								<div class="img">
									<img :src="nationInfo.flag" alt="" />
								</div>
								<span>{{ nationInfo.chinese_simplified }}</span>
							</div>
						</div>
					</div>
				</div>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup>
	import { ref } from 'vue';
	import { NATION_TAGS } from '../constant/index.js';
	const mode = defineModel();
	const isShow = ref(mode);
	let { data } = await useFetch('/api/nationList');
	data = data?.value?.data;
	const emits = defineEmits(['update:selected']);
	const activeName = ref(NATION_TAGS[0]);
	const currentName = computed(() => {
		if (activeName.value === NATION_TAGS[0]) {
			return '1';
		}
		return activeName.value;
	});
	function handlerClick(e) {
		// console.log(e);
		emits('update:selected');
	}
</script>

<style scoped lang="scss">
	.nation {
		--el-color-primary: #b4272b;
		width: 800px;
		height: 320px;
		background-color: white;
		padding: 10px;
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
		border-radius: 4px;
		cursor: pointer;
		&:deep(.el-tabs__content) {
			overflow: auto;
			height: calc(300px - 54px);
		}
		&:deep(.el-tabs__nav-scroll) {
			// overflow: scroll;
		}
		&:deep(.el-tabs__item) {
			@include font(_, 14px, 14px, 400, #222222);
			&:hover {
				color: #222222;
			}
			&.is-active {
				color: #b4272b;
				@include font(_, 14px, 14px, 500, #b4272b);
			}
		}
		.nation-tabs {
			.nation-tabs-item-content {
				.nation-tabs-item-content-block {
					@include flex();
					.nation-tabs-item-content-block-title {
						width: 50px;
						align-self: flex-start;
						@include font(_, 14px, 14px, 500, #222222);
					}
					.nation-tabs-item-content-block-flag {
						flex: 1;
						flex-wrap: wrap;
						gap: 10px;
						margin-bottom: 30px;
						@include flex(_, flex-start);
						.nation-tabs-item-content-block-flag-box {
							width: 100px;
							@include flex();
							.img {
								width: 35px;
								height: 30px;
								margin-right: 7px;
								border: 1px solid #f1f1f1;
								flex: 0 0 auto;
								@include flex();
								img {
									width: 33px;
									height: 22px;
								}
							}
							span {
								width: calc(100px - 35px - 7px);
								overflow-wrap: break-word;
								@include font(_, 12px, 12px, 350, #555555);
							}
						}
					}
				}
			}
		}
	}
</style>
